<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/img/b-1.png"></image>
		<image class="img-b" src="/static/img/b-2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">{{ subTitle }}</view>
		<form class="cl">
			<!-- 登录账号 -->
			<view class="login-form-item">
				<u-input v-model="username" placeholder="请输入手机号" maxlength="30">
					<u-icon slot="prefix" name="account" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 登录密码 -->
			<view class="login-form-item">

				<!-- 验证码输入框 -->
				<u-input v-model="password" type="text" placeholder="请输入验证码" maxlength="6">
					<u-icon slot="prefix" name="lock" size="25px"></u-icon>
					<template slot='suffix'>
						<u-button class="yambtn" v-if="!isFetchingCaptcha" type="primary" size="small"
							@tap="fetchCaptcha">获取验证码</u-button>
						<span style="font-size: 24rpx;" v-else>{{ `${countdown}s后重新发送` }}</span>
					</template>
				</u-input>
			</view>
			<button class="dlbtn" @tap="login()">登 录</button>
		</form>
	</view>
</template>
<script>
	import {
		login,
		gologin
	} from '@/api/login.js'

	export default {
		data() {
			return {
				title: '欢迎登录',
				subTitle: '吧台投资人端',
				// 登录账号
				username: null,
				// 密码
				password: null,
				captcha: '',
				isFetchingCaptcha: false,
				countdown: 60, // 倒计时时间
				buttonText: '获取验证码',
			};
		},
		created() {},
		methods: {
			fetchCaptcha() {
				if (this.username == null) {
					uni.$u.toast('请输入手机号')
					return
				}
				const regex = /^1[3-9]\d{9}$/;

				if (!regex.test(this.username)) {
					uni.$u.toast('手机号格式有误')
					return
				}
				if (!this.isFetchingCaptcha) {
					login({
						mobile: this.username
					}).then(res => {
						console.log(res);
						this.password = res.data
					})
					this.isFetchingCaptcha = true;
					this.buttonText = '';
					// 开始倒计时
					const timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown--;
						} else {
							clearInterval(timer);
							this.isFetchingCaptcha = false;
							this.countdown = 60; // 重置倒计时
							this.buttonText = '获取验证码';
						}
					}, 1000);
					// 实际应用中，这里应该调用后端API发送验证码
					// 并处理成功或失败的情况
				}
			},
			// 确认登录
			login() {
				if (this.username == null) {
					uni.$u.toast('请输入手机号')
					return
				}
				const regex = /^1[3-9]\d{9}$/;
				
				if (!regex.test(this.username)) {
					uni.$u.toast('手机号格式有误')
					return
				}
				if (this.password == null) {
					uni.$u.toast('请输入验证码')
					return
				}
				let data = {
					mobile: this.username,
					sysType: '5',
					verifyCode: this.password,
				}
				gologin(data).then(res => {
					console.log('aaaaaaaaa');
					console.log(res);
					console.log('aaaaaaaaa');
					if (res.code == '00000') {
						uni.$u.toast('登录成功')
						uni.setStorage({
							key: 'token',
							data: res.data.accessToken,
							success: function() {
								console.log('success');
							}
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index',
								fail(err) {
									console.log(err)
								}
							})
						}, 1000);
					}
				}).catch(err => {
					this.isFetchingCaptcha = false;
					this.countdown = 60; // 重置倒计时
					this.buttonText = '获取验证码';
					console.error('接口调用出错：', err);
					uni.$u.toast(err.msg); // 或者显示其他错误提示
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';
</style>